<template>
	<base-popup class="full-screen rounded-[10px]" :show="isShowNotification" hideHeader>
		<div class="success-ftd relative flex flex-col flex-1 pb-10">
			<base-icon
				name="close"
				@click="handleClose(notificationItem)"
				class="btn-close absolute cursor-pointer z-10" />
			<div v-if="notificationItem" class="success-ftd-content pt-[50px]">
				<div style="position: relative; z-index: 1">
					<p class="title"><base-text :text-t="notificationItem?.title" /></p>
					<p class="sub-title px-10">
						<base-text :text-t="notificationItem?.subTitle" />
					</p>
					<p
						class="text-warning sub-title1 cursor-pointer"
						@click="notificationItem?.onClickViewUrl?.()"
						v-if="notificationItem?.extraSubTitle">
						<base-text :text-t="notificationItem?.extraSubTitle" />
					</p>
					<div class="bonus-area" v-if="notificationItem?.bonus">
						<p class="text-yellow-gradient app-font-heavy">
							{{ appStore.currency }}
							{{ fmtAmount(notificationItem?.bonus) }}
						</p>
					</div>
					<template v-if="notificationItem?.countdown">
						<rewards-countdown
							:time="Number(notificationItem.countdown)"
							@finish="onFinish"
							class="w-fit mx-auto px-2" />
					</template>
				</div>
				<div class="light-box relative">
					<div class="wrap-light-image">
						<img
							src="@/assets/img/activity/popup/light.svg"
							alt="light-purple"
							class="light-image relative z-10" />
					</div>
					<base-image
						:src="notificationItem.icon"
						:type="notificationItem.typeIcon"
						v-if="notificationItem.typeIcon"
						class="w-[226px] relative z-20" />
					<base-image
						:src="notificationItem.icon"
						v-else
						class="relative z-20"
						:class="
							notificationItem.iconWidth ? `w-[${notificationItem.iconWidth}]` : 'w-[300px]'
						" />
				</div>
				<div>
					<base-button
						class="button my-button !w-[430px] mx-auto"
						type="primary"
						block
						round
						@click="notificationItem.onClick?.()">
						{{ $t(notificationItem?.btnText) }}
					</base-button>
					<p v-if="notificationItem?.note">
						{{ $t(notificationItem.note) }}
					</p>
					<p class="details-link cursor-pointer" v-if="notificationItem?.detailLink">
						<span @click="notificationItem.onClickLink?.()">
							<base-text :text-t="notificationItem?.detailLink" />
						</span>
					</p>
				</div>
			</div>
		</div>
	</base-popup>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { useActivityStore, useAppStore } from '@/store'
// import { debounce } from 'lodash-es'
import { BaseButton, BaseIcon, BasePopup, BaseImage, BaseText } from '@/components/base'
import RewardsCountdown from '@/views/activity/components/rewards-countdown/index.vue'
import { useRoute, useRouter } from 'vue-router'
import { fmtAmount } from '@/utils'

defineOptions({ name: 'ViewsActivityRewardPopup' })

const router = useRouter()
const activityStore = useActivityStore()
// const walletStore = useWalletStore()
const appStore = useAppStore()
const hasNotifications = computed(() =>
	Object.values(activityStore.notifications).filter((item) => item !== null)
)
const route = useRoute()
const notificationItem: any = computed(
	() => Object.values(activityStore.notifications).filter((item) => item !== null)?.[0]
)
const isShowNotification = computed(
	() => activityStore.showNotification && notificationItem.value?.isShow
)

// const debounceGetNotifications = debounce(
// 	async () => await activityStore.getNotifications(),
// 	15000,
// 	{ leading: true }
// )

const handleClose = async (item: any) => {
	if (hasNotifications.value.length === 1) {
		activityStore.setShowNotification(false)
	} else {
		await handlePopupStatus()
	}

	await activityStore.deleteNotifications(item?.type)
}

const onFinish = () => {
	handlePopupStatus()
	activityStore.getProgressiveData()
}

const handlePopupStatus = async () => {
	activityStore.setShowNotification(false)
	// await activityStore.deleteNotifications(notificationItem.value?.type)
	if (hasNotifications.value.length > 0) {
		setTimeout(() => {
			activityStore.setShowNotification(true)
		}, 500)
	}
}

watch(
	[() => activityStore.notifications, () => router.currentRoute.value.fullPath],
	() => {
		if (!route.path.startsWith('/details/')) {
			const listData = Object.values(activityStore.notifications).filter((item) => item !== null)
			if (listData.length > 0) {
				handlePopupStatus()
			}
		}
	},
	{ immediate: true }
)

// watch(
// 	() => Number(walletStore.balance),
// 	async (value) => {
// 		value > 0 && debounceGetNotifications()
// 	},
// 	{ immediate: true }
// )
</script>

<style scoped lang="scss">
.success-ftd {
	border-radius: 10px;
	//@include font-normal();
	background-color: var(--color-black);
	color: var(--color-white);
	background-image: url('@/assets/img/activity/popup/confetti.png');
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1;
	.btn-close {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 20px;
		color: var(--color-white);
	}
	&-content {
		flex: 1;
		//padding: 50px 30px 70px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		text-align: center;
		gap: 40px;
		.title {
			font-size: 25px;
			line-height: 35px;
			color: var(--color-white);
		}
		.sub-title {
			font-size: 14px;
			line-height: 19.6px;
			padding-top: 15px;
			color: var(--color-white);
		}
		.sub-title1 {
			font-size: 14px;
			line-height: 19.6px;
			padding-top: 10px;
		}
		.bonus-area {
			margin: 0 -30px 4px;
			padding: 0 4px;
			overflow: auto hidden;
			white-space: nowrap;
		}
		.text-yellow-gradient {
			min-width: 100%;
			width: max-content;
			//@include font-heavy();
			font-size: 45px;
			line-height: 0.9;
			color: transparent;
			background-image: linear-gradient(90deg, #ff7a00 0%, #fee042 100%);
			-webkit-background-clip: text;
			background-clip: text;
			padding-top: 10px;
		}
		.light-box {
			position: relative;
			//width: 100%;
			.wrap-light-image {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				//height: 510px;
				//width: 100vw;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				pointer-events: none;
			}
			.light-image {
				width: 100%;
				scale: 1.4;
				animation: auto-rotate 5s linear infinite;
			}
			.vip-image {
				margin: auto;
				width: 168px;
				height: 135px;
				position: relative;
				z-index: 1;
			}
		}
		.my-button {
			width: 100%;
			height: 40px;
			margin-bottom: 15px;
		}
		.details-link {
			margin-top: 15px;
			color: var(--color-warning);
		}
	}
}
</style>
